<template>
    <el-header id="navtop">
        <div>
            <h1>{{ paper_info.title }}</h1>
        </div>
        <div>
            考试时长:{{ minutes }}分钟
        </div>
        <div>
            考生:{{ username }}
        </div>
    </el-header>
    <div id="countdown_back" style="background-color:#5fbfff;padding:10px;border-radius:10px;">
        <!-- <el-countdown title="考试倒计时" :value="value" /> -->
        <span>考试倒计时</span><br>
        <span id="countdown">{{ countdown_ }}</span>
    </div>
    <!-- <div id="paper_info"><span style="line-height: 50px;">{{ paper_score_info }}</span></div> -->
    <div v-for="qs, index in question_list">
        <qslist :question="qs" :qs_type="qs.question_type" :index="index" @handle-change="get_answer" :score="qs.score">
        </qslist>
    </div>
    <div id="submit_btn">
        <el-button @click="submit_answer" :type="submit_status">点击交卷</el-button>
    </div>
    <el-dialog v-model="show_score" title="考试结果">
        {{ result }}
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="show_score = false">Cancel</el-button>
                <el-button type="primary" @click="back">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive, onUnmounted, computed, watch } from "vue"
let username = localStorage.getItem('username')
import qslist from '../../components/qs_list.vue'
import formatTime from '../../utils/formattime'
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox, backtopEmits } from 'element-plus'
import axios from '../../utils/http'

let router = useRouter()
let paper_info = ref({})
let route = useRoute()
let surplus_time = ref('')
let submit_status = ref('danger')
let paper_score_info = ref('')
let question_list = ref([])
let answer_list = reactive([])
let show_score = ref(false)
let result = ref('')
let time = ref(60 * 60)
const minutes = Math.floor(time.value / 60);
let countdown_ = ref('')
let timer = setInterval(countdown, 1000)

let answer_num = ref(0)
function countdown() {
    time.value -= 1
    var hours = Math.floor(time.value / 3600);
    var minutes = Math.floor((time.value % 3600) / 60);
    var remainingSeconds = time.value % 60;
    countdown_.value = hours + "时" + minutes + "分" + remainingSeconds + "秒"
    if (time.value <= 0) {
        console.log('倒计时结束!!!!!');
        clearInterval(timer)
        submit()
    }
}

function get_answer(answer, q_id, q_type, score) {
    const index = answer_list.findIndex(item => item.q_id == q_id)
    if (index == -1) {
        answer_list.push({ q_id: q_id, answer: answer, question_type: q_type, score: score })
    } else {
        answer_list[index].answer = answer
    }
    let num = 0
    for (let index = 0; index < answer_list.length; index++) {
        if (answer_list[index].answer != '' && answer_list[index].answer != []) {
            num += 1
        }
    }
    console.log(num);
    if (num == answer_list.length) {
        submit_status.value = 'success'
    } else {
        submit_status.value = 'danger'
    }

}
function back() {
    router.push('/student')
    localStorage.removeItem('remainingTime');
}
function submit_answer() {
    let num = 0
    for (let index = 0; index < answer_list.length; index++) {
        if (answer_list[index].answer != '' && answer_list[index].answer != []) {
            num += 1
        }
    }
    if (num == answer_list.length) {
        submit_status.value = 'success'
        submit()
    } else {
        ElMessage.error('还有题目未作答')
    }
}
onMounted(() => {
    get_paper_info()

})


function submit() {
    console.log(answer_list);
    axios({
        url: 'answer/answer/',
        method: 'POST',
        data: {
            answer_list: answer_list,
            paper_id: route.query.id
        },
        params: {
            username: username
        }
    }).then(res => {
        if (res.data.code == 201) {
            show_score.value = true
            result.value = res.data.result
            clearInterval(timer)
        } else {
            ElMessage.error('提交失败')
        }


    })
}
function get_paper_info() {
    axios({
        url: 'answer/get_paper_info/',
        method: 'GET',
        params: {
            paper_id: route.query.id
        }
    }).then(res => {
        paper_info.value = res.data.data
        question_list.value = JSON.parse(paper_info.value.questions_info)
        answer_list = res.data.empty_answer
    })
}

window.onbeforeunload = function (e) {
    return '您还有未提交的信息'
}
</script>

<style scoped>
#countdown {
    color: red;
}

#submit_btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

#paper_info {
    color: green;
    height: 50px;
    width: 100%;
    background-color: #fff;
    left: 0;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

#navtop {
    background-color: #5fbfff;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    text-align: center;
}

#countdown_back {
    position: fixed;
    top: 70px;
    right: 20px;
    color: #fff;
    z-index: 10;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
</style>
<style>
.el-statistic__head {
    color: #fff;
    font-size: 16px
}

.el-statistic__content {
    color: #ff0000;
    font-weight: 700;
}
</style>